<template>
  <div id="right1">
    
    <div id="container1"></div>
    <div id="container2"></div>
  </div>
</template>
<script>
import { Pie, G2 } from '@antv/g2plot';
import insertCss from 'insert-css';
insertCss(`
#right1 {
  display: flex;
  flex-direction: row !important;
  padding: 8px;
}
#container1, #container2 {
  flex: 1;
  height: 100px;
}
`);
export default {
  data(){
    return {}
  },
  methods:{
    myAntv(){
      const { Util } = G2;

      const plot1 = new Pie('container1', {
        data: [
          { type: '男', value: 0.58 },
          { type: '女', value: 0.42 },
        ],
        meta: {
          value: {
            formatter: (v) => `${(v * 100).toFixed(0)}%`,
          },
        },
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        legend: false,
        label: { type: 'inner' },
      });

      const plot2 = new Pie('container2', {
        data: [
          { type: '男', value: 0.64 },
          { type: '女', value: 0.36 },
        ],
        meta: {
          value: {
            formatter: (v) => `${(v * 100).toFixed(0)}%`,
          },
        },
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        innerRadius: 0.5,
        legend: false,
        label: { type: 'inner' },

        statistic: {
          title: false,
          content: {
            style: {
              fontSize: '12px',
            },
            customHtml: (container, view, datum, data) => {
              container.style.overflow = 'visible';
              const text = datum
                ? `${(datum.value * 100).toFixed(0)}%`
                : `${(data.reduce((r, d) => r + d.value, 0) * 100).toFixed(0)}%`;
              return text;
            },
          },
        },
        // Because interactions of 'statistic' will cause tooltip interaction not to work, so enable tooltip interaction explicitly.
        interactions: [{ type: 'tooltip', enable: true }],
      });
      plot1.render();
      plot2.render();

      /**
       * 根据指定 切片数据 获取切片元素 element 的中心坐标点
       */
      function getPoint(view, xField, activeValue) {
        const { elements, coordinate } = view.geometries[0];
        const element = elements.find((ele) => ele.getModel().data[xField] === activeValue);
        if (element) {
          const { radius, innerRadius, polarRadius } = coordinate;
          const center = coordinate.getCenter();
          const { startAngle, endAngle } = Util.getAngle(element.getModel(), coordinate);
          const middleAngle = (startAngle + endAngle) / 2;
          const r = (polarRadius * (radius + innerRadius)) / 2;
          const x = r * Math.cos(middleAngle);
          const y = r * Math.sin(middleAngle);

          return {
            x: center.x + x,
            y: center.y + y,
          };
        }
        return null;
      }

      // 监听事件，进行 Tooltip 联动
      let inAction = null;
      plot1.on('tooltip:change', (e) => {
        if (inAction !== 'plot2') {
          const { data: eventData } = e;
          const point = getPoint(plot2.chart, 'type', eventData.items?.[0]?.data?.type);
          if (point) {
            inAction = 'plot1';
            plot2.chart.showTooltip(point);
          } else {
            plot2.chart.hideTooltip();
          }
        }
      });

      plot1.on('tooltip:hide', (e) => {
        if (inAction) {
          inAction = null;
          plot2.chart.hideTooltip();
        }
      });

      plot2.on('tooltip:change', (e) => {
        if (inAction !== 'plot1') {
          const { data: eventData } = e;
          inAction = 'plot2';
          const point = getPoint(plot1.chart, 'type', eventData.items?.[0]?.data?.type);
          if (point) {
            plot1.chart.showTooltip(point);
          } else {
            plot1.chart.hideTooltip();
          }
        }
      });

      plot2.on('tooltip:hide', (e) => {
        if (inAction) {
          inAction = null;
          plot1.chart.hideTooltip();
        }
      });
    }
  },
  mounted(){
    this.myAntv()
  }
}
</script>
<style lang="scss" scoped>

</style>